<template>
  <div class="flex-auto over-hidden">
    <listLayout>
      <template #title>分类列表</template>
      <template #form>
        <div>
          <el-button @click="handleDialogOpen">新增分类</el-button>
        </div>

        <!-- <el-form :inline="true" @submit.native.prevent="handleFormSubmit">
          <el-form-item>
            <el-input
              v-model="formData.filenameKeyword"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            ><el-button icon="el-icon-search" native-type="submit"></el-button
          ></el-form-item>
        </el-form> -->
      </template>

      <template #table>
        <el-table :data="tableData" :loading="tableLoading" height="600px">
          <el-table-column prop="className" label="分类名称  " width="">
          </el-table-column>
          <el-table-column prop="size" label="创建时间" width="">
            <template slot-scope="scope">
              <span>{{ scope.row.classTime.slice(0, 10) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-popconfirm
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗？"
                @confirm="handleTableRowDelete(scope.row)"
              >
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination mt40">
          <el-pagination
            background
            layout="prev, pager, next, sizes, total"
            :total="pagination.total"
            :page-sizes="[10, 20, 30, 40]"
            :current-page="formData.page + 1"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </template>
    </listLayout>

    <el-dialog
      title="新增分类"
      width="500px"
      top="5%"
      :visible.sync="dialogVisible"
    >
      <cateFrom @cancel="handleDialogClose" @sure="handleAddCate" />
    </el-dialog>
  </div>
</template>

<script>
import listLayout from "@/components/listLayout/listLayout.vue";
import cateFrom from "./cateFrom.vue";
// mixin
import servie from "./service";
// utils
import { getStorageUserId } from "@/utils/profile";

export default {
  name: "CateTable",

  components: { listLayout, cateFrom },

  mixins: [servie],

  data() {
    return {
      formData: {
        page: 0,
        size: 10,
        userId: getStorageUserId(),
      },

      tableData: [],
      tableLoading: false,

      dialogVisible: false,

      pagination: {
        total: 0,
      },
    };
  },

  methods: {
    handleDialogOpen() {
      this.dialogVisible = true;
    },

    handleDialogClose() {
      this.dialogVisible = false;
    },

    handleFormSubmit(e) {
      if (e && e.type === "submit") {
        this.formData.page = 0;
      }
      this.getCates(this.formData);
    },

    handleTableRowDelete(row) {
      // console.log(row);
      this.deleteCate(row.id, row.user.id)
    },

    handleSizeChange(size) {
      this.formData.size = size;
      this.handleFormSubmit();
    },

    handleCurrentChange(page) {
      this.formData.page = page - 1;
      this.handleFormSubmit();
    },

    handleAddCate(formData) {
      // console.log(formData);
      const data = { ...formData, userId: getStorageUserId() };
      this.createCate(data);
    },
  },

  mounted() {
    this.handleFormSubmit();
  },
};
</script>

<style scoped lang="less">
/deep/ .list-filter {
  display: flex;
  justify-content: space-between;
}
</style>